<template>
  <div class="flex flex-col h-full">
    <!-- 表格部分 -->
    <div class="flex-1 overflow-auto">
      <el-table
        ref="tableRef"
        :data="batteryData"
        style="width: 100%"
        border
        stripe
        highlight-current-row
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column
          prop="batteryPackSN"
          label="Battery Pack SN"
          width="180"
          fixed="left"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <span class="font-mono">{{ row.batteryPackSN }}</span>
          </template>
        </el-table-column>

        <el-table-column label="Fault Status" width="140">
          <template #default="{ row }">
            <span class="flex items-center">
              <span
                class="inline-block w-2 h-2 rounded-full mr-2"
                :class="row.faultStatus === 'Normal' ? 'bg-green-500' : 'bg-red-500'"
              />
              {{ row.faultStatus }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="batteryType"
          label="Battery Type"
          min-width="160"
          show-overflow-tooltip
        />

        <el-table-column
          prop="deviceSN"
          label="Device SN"
          width="180"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <span class="font-mono">{{ row.deviceSN }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="capacity"
          label="Capacity (kWh)"
          min-width="140"
          align="right"
        >
          <template #default="{ row }">
            {{ Number(row.capacity).toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column label="Operation" width="120" fixed="right" align="center">
          <template #default="scope">
            <el-button type="primary" link @click="handleDetail(scope.row)">
              Details
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="flex items-center justify-end p-4">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" background
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handlePageChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { ElTable } from "element-plus";
import type { BatteryPackItem } from "../data";

const props = defineProps({
  batteryData: {
    type: Array as () => BatteryPackItem[],
    required: true,
    default: () => []
  },
  pagination: {
    type: Object,
    required: true,
    default: () => ({
      total: 0,
      currentPage: 1,
      pageSize: 10
    })
  }
});

const emit = defineEmits(["detail", "page-change", "size-change"]);

// 本地当前页引用，用于v-model绑定
const currentPage = ref(props.pagination.currentPage);
const pageSize = ref(props.pagination.pageSize);

// 监听props中的currentPage和pageSize变化，同步到本地
watch(
  () => props.pagination.currentPage,
  newVal => {
    currentPage.value = newVal;
  }
);

watch(
  () => props.pagination.pageSize,
  newVal => {
    pageSize.value = newVal;
  }
);

const handlePageChange = (page: number) => {
  emit("page-change", page);
};

const handleSizeChange = (size: number) => {
  emit("size-change", size);
};

const handleDetail = (row: BatteryPackItem) => {
  emit("detail", row);
};

// 表格引用
const tableRef = ref<typeof ElTable | null>(null);
</script>

<style scoped lang="scss">
/* 调整分页组件样式 */
:deep(.el-pagination) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 取消分页器非活跃按钮的背景色 */
:deep(.el-pagination .el-pager li) {
  background-color: transparent;
}

/* 设置表格头部样式 */
:deep(.el-table th.el-table__cell) {
  background-color: #f5f7fa;
  color: #606266;
}
</style>
